{% extends 'admin_dashboard.html' %}
{% block content %}

<!-- 页面标题 -->
<div class="d-flex align-items-center mb-4" style="font-size: 20px; font-weight: bold; color: #333;">
  <i class="bi bi-clock-history" style="font-size: 26px; color: #3f51b5; margin-right: 10px;"></i>
  交易记录管理
</div>

<div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">

  <!-- 操作按钮区 -->
  <div class="card p-4 mb-4">
    <h5 class="fw-bold mb-3">🔧 操作</h5>
    <div class="d-flex gap-3">
      <a href="{{ url_for('add_transaction') }}" class="btn btn-gray">➕ 添加交易</a>
      <a href="{{ url_for('export_transactions') }}" class="btn btn-gray">📤 导出 CSV</a>
    </div>
  </div>

  <!-- 表格展示区 -->
  <div class="card p-4">
    <h5 class="fw-bold mb-3">📄 交易记录列表</h5>
    <div class="table-responsive">
      <table class="table table-bordered align-middle table-hover text-center">
        <thead class="table-light">
          <tr>
            <th>交易编号</th>
            <th>卡号</th>
            <th>交易日期</th>
            <th>交易类型</th>
            <th>交易金额</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {% for tx in transactions %}
          <tr>
            <td>{{ tx.transactionID }}</td>  <!-- 交易编号 -->
            <td>{{ tx.cardID }}</td>         <!-- 卡号 -->
            <td>{{ tx.transactionDate }}</td> <!-- 交易日期 -->
            <td>{{ tx.transactionType }}</td> <!-- 交易类型 -->
            <td>{{ tx.transactionAmount }}</td> <!-- 交易金额 -->
            <td>{{ tx.note }}</td>            <!-- 备注 -->
            <td>
              <a href="{{ url_for('delete_transaction', transactionID=tx.transactionID) }}" class="text-danger"
                 onclick="return confirm('确认删除此交易记录？')">删除</a>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="7" class="text-muted">暂无交易记录</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>

{% endblock %}
